<template>
	<div class="sti_module">
		<div class="sti_content1">
			<van-tabs v-model="active" type="card" animated>
				  <van-tab title="领券记录">
					<div class="list">
						<div class="data1">
							<div class="data_img">
								<img src="https://image.soole.com.cn/0036d3ad-14cd-4ae1-a7b8-8003fd1d521e" alt="">
							</div>
						</div>
						<div class="data2">
							<div class="data_top">
								<div class="name">老李店铺 </div>
								<div class="get_price msg_txt">刚刚获得10元</div>
							</div>
							<p class="msg_txt">购物券天天领，好运年年有</p>
						</div>
					</div>
					<div class="list">
						<div class="data1">
							<div class="data_img">
								<img src="https://image.soole.com.cn/0036d3ad-14cd-4ae1-a7b8-8003fd1d521e" alt="">
							</div>
						</div>
						<div class="data2">
							<div class="data_top">
								<div class="name">老李店铺 </div>
								<div class="get_price msg_txt">刚刚获得10元</div>
							</div>
							<p class="msg_txt">购物券天天领，好运年年有</p>
						</div>
					</div>
					<div class="list">
						<div class="data1">
							<div class="data_img">
								<img src="https://image.soole.com.cn/0036d3ad-14cd-4ae1-a7b8-8003fd1d521e" alt="">
							</div>
						</div>
						<div class="data2">
							<div class="data_top">
								<div class="name">老李店铺 </div>
								<div class="get_price msg_txt">刚刚获得10元</div>
							</div>
							<p class="msg_txt">购物券天天领，好运年年有</p>
						</div>
					</div>
					<div class="list">
						<div class="data1">
							<div class="data_img">
								<img src="https://image.soole.com.cn/0036d3ad-14cd-4ae1-a7b8-8003fd1d521e" alt="">
							</div>
						</div>
						<div class="data2">
							<div class="data_top">
								<div class="name">老李店铺 </div>
								<div class="get_price msg_txt">刚刚获得10元</div>
							</div>
							<p class="msg_txt">购物券天天领，好运年年有</p>
						</div>
					</div>
				  </van-tab> 
			
			
			  <van-tab title="好友助力">
				<div class="list">
					<div class="data1">
						<div class="data_img">
							<img src="https://image.soole.com.cn/0036d3ad-14cd-4ae1-a7b8-8003fd1d521e" alt="">
						</div>
					</div>
					<div class="data2">
						<div class="data_top2">
							<div class="name">老李店铺 </div>
							<div class="time">2019.10.28</div>
						</div>
						<p class="msg_txt">购物券天天领，好运年年有</p>
					</div>
				</div>
			  </van-tab> 
			  <van-tab title="晒单记录">
			    <div class="list">
			    	<div class="data1">
			    		<div class="data_img">
			    			<img src="https://image.soole.com.cn/0036d3ad-14cd-4ae1-a7b8-8003fd1d521e" alt="">
			    		</div>
			    	</div>
			    	<div class="data2">
			    		<div class="data_top2">
			    			<div class="name">老李店铺 <span class="plus_price">+200元</span></div>
			    			<div class="time sd_time">2019.10.28</div>
			    		</div>
			    		<p class="msg_txt">邀请20名好友获得了200元购物券，已到账 </p>
			    	</div>
			    </div>
			  </van-tab>
			</van-tabs>
		</div>
		
		<div class="sti_content2">
			<img src="https://image.soole.com.cn/如何邀请好友.png" alt="">
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				active:0,
				ticketCount:100,//累计票数
				ruleBool:false,//活动规则bool
				shareBool:false,//分享方式bool
				ticketBool:true,//得到券
				//记时
				hours: "00",
				minutes: "00",
				seconds: "00",
			}
		},
		mounted() {
			this.startTimer();
		},
	  methods: {
	    onClickLeft() {
	      Toast('返回');
	    },
		//关闭活动规则的弹窗
		cancel(){
			this.ruleBool = false;
			this.ticketBool = false;
			this.shareBool = false;
		},
		//分享好友
		FriendsShare(){
			this.shareBool = false;
			this.ticketBool = true;
			this.ticketCount += 10; 
		},
		//倒计时
		countDown(maxtime) {
			let date = new Date();
			let gl = date.getTime();
			// 先算出剩余时间有多少小时，这些小时有多少个24小时 不满24小时的及为剩余多少小时
			this.hours = Math.floor(maxtime / 60 % 24);
			// 换算 多少分钟 满足60分的为小时数 不满60分的及为剩余分钟数
			this.minutes = Math.floor(maxtime / 60 % 60);
			// 满足60秒的为分钟数 不满60秒的及为剩余秒数
			this.seconds = Math.floor(maxtime % 60);
			//判断总的秒数是否小于=0 是则结束定时器
			if (maxtime <= 0) {
				return maxtime;
			}
			// var msg = "距离结束还有"+ this.hours +"时"+ this.minutes + "分" + this.seconds + "秒";
			// console.log(msg);
		},
		// 设置定时器
		startTimer() {
			var maxtime = 24 * 60 * 60;
			this.timer = setInterval(() => {
				var curTime = this.countDown(maxtime);
				if (curTime <= 0) {
					clearInterval(this.timer);
					this.timer = null;
				}
				--maxtime;
			}, 1000);
		},
		
	  },
	  components:{
		  // rule,ticket,comdList
	  }
	}
</script>

<style lang="scss">
	.sti_module{
		padding-top: 50px;
		.sti_content1,.sti_content2{
			width: 90%;
			margin: 0 auto;
		}
		.sti_content1{
			.van-tabs__nav--card{
				border: none;
				margin: 0;
				justify-content: space-around;
			}
			.van-tabs__nav--card .van-tab {
				color: #FF2451;
				border: none;
				border-radius: 30px;
			}
			.van-tabs__nav--card .van-tab.van-tab--active{
				color: #fff;
				background-image: linear-gradient(to top, #FF2351 20%, #FFA492 100%);
			}
			.van-tabs__nav{
				background: none;
			}
			.van-tab{
				flex: none; 
				width: 30%;
			}
			.van-tabs__wrap{
				margin-bottom: 12px;
				margin-top: 26px;
			}
			.van-tabs__content--animated {
			    overflow-y: scroll;
			    height: 200px;
			}
			
			height: 290px;
			background-image: url('https://image.soole.com.cn/第一框.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 10px 20px;
			.list{
				width: 100%;
				display: flex;
				padding: 10px 0;
				border-bottom: 1px solid #FFE7EC;
				box-sizing: border-box;
				height: 62px;
				align-items: center;
				.data1{
					margin-right: 12px;
					.data_img{
						width: 36px;
						height: 36px;
						border-radius: 50%;
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
						}
					}
				}
				.data2{
					flex:8;
					.data_top{
						display: flex;
						justify-content: space-between;
						margin-bottom: 3px;
					}
					.name{
						line-height: 12px;
						font-size: #333333;
					}
					.data_top2{
						flex-direction: column;
					}
					.plus_price{
						display: inline-block;
						background-color:#FFCB50;
						line-height: 23px;
						padding: 0 3px;
						border-radius: 5px;
						margin-left: 3px;
					}
					.time{
						color: #333;
						font-size: 12px;
						margin-top: 3px;
					}
					.sd_time{
						margin-top: 0;
					}
				}
			}
		}
		
		.sti_content2{
			margin-top: 50px;
			width: 90%;
			img{
				width: 100%;
			}
		}
	}	
</style>
